<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<c:url value='/assets/css/tailwind.output.css'/>">
    <link rel="stylesheet" href="<c:url value='/assets/css/toastr.min.css'/>">
    <script type="text/javascript" src="<c:url value='/assets/js/http/axios_client.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/admin/admin_kanban.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/echarts.min.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/axios.min.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/jquery-3.6.0.min.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/assets/js/toastr.min.js'/>"></script>
    <title>Video Player</title>
</head>
<body class="min-h-screen bg-base-300">
<!-- Navigation -->
<nav class="navbar bg-base-200">
    <div class="flex-1">
        <a class="btn btn-ghost text-xl">金牌影院</a>
        <div class="tabs tabs-boxed bg-transparent hidden sm:flex">
            <a class="tab">首页</a>
            <a class="tab">电影</a>
            <a class="tab">电视剧</a>
            <a class="tab">综艺</a>
            <a class="tab tab-active">动漫</a>
        </div>
    </div>
    <div class="flex-none gap-2">
        <div class="form-control">
            <input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto"/>
        </div>
        <button class="btn btn-ghost btn-circle">
            <div class="indicator">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                </svg>
                <span class="badge badge-xs badge-primary indicator-item"></span>
            </div>
        </button>
    </div>
</nav>

<!-- Main Content -->
<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
        <!-- Video Player Section -->
        <div class="lg:col-span-3">
            <div class="bg-base-200 rounded-lg">
                <!-- Video Title -->
                <div class="p-4 text-xl font-bold">
                    长生界 第7集
                </div>
                <!-- Video Player -->
                <div class="aspect-video bg-black relative">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="loading loading-spinner loading-lg"></span>
                    </div>
                </div>
                <!-- Video Controls -->
                <div class="p-4 flex flex-wrap gap-2">
                    <button class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        播放
                    </button>
                    <button class="btn btn-ghost">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                        </svg>
                        收藏
                    </button>
                </div>
            </div>

            <!-- Video Info -->
            <div class="mt-4 bg-base-200 rounded-lg p-4">
                <div class="stats shadow w-full">
                    <div class="stat">
                        <div class="stat-title">评分</div>
                        <div class="stat-value">3.2</div>
                    </div>
                    <div class="stat">
                        <div class="stat-title">时长</div>
                        <div class="stat-value text-lg sm:text-2xl">26分12秒</div>
                    </div>
                    <div class="stat">
                        <div class="stat-title">更新至</div>
                        <div class="stat-value">10集</div>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="prose max-w-none">
                    <h2>剧情简介：</h2>
                    <p>
                        世上谁人不死？任你风华绝代，抱恨黄土下；任你一代天骄，生前万里山山，到头来也终将化作一捧黄土。故事要讲述第被皇家云长绝杀后，通过一场入人心的阴谋，最终成为一个长生不死的存在。这是一条看不了尽头的道路，路强之上自由和执着，等待着他的将会是一直深不见底的深渊，战胜欲。热血沸腾的战斗，察觉与成型的阴谋，满是谜题寻找生存的迷宫，通过这样长生不死的旅途，通俗的讲个不老的封神之路。</p>
                </div>

                <!-- 猜你喜欢 Section -->
                <div class="mt-8">
                    <h2 class="text-2xl font-bold mb-4">猜你喜欢</h2>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                        <!-- Recommended Item 1 -->
                        <div class="card bg-base-100 shadow-xl">
                            <figure class="relative pt-[56.25%]">
                                <img src="/placeholder.svg" alt="封神演义"
                                     class="absolute inset-0 w-full h-full object-cover"/>
                            </figure>
                            <div class="card-body p-2">
                                <h3 class="card-title text-sm">封神演义</h3>
                                <p class="text-xs text-gray-400">更新至12集</p>
                            </div>
                        </div>
                        <!-- Recommended Item 2 -->
                        <div class="card bg-base-100 shadow-xl">
                            <figure class="relative pt-[56.25%]">
                                <img src="/placeholder.svg" alt="斗破苍穹"
                                     class="absolute inset-0 w-full h-full object-cover"/>
                            </figure>
                            <div class="card-body p-2">
                                <h3 class="card-title text-sm">斗破苍穹</h3>
                                <p class="text-xs text-gray-400">更新至24集</p>
                            </div>
                        </div>
                        <!-- Recommended Item 3 -->
                        <div class="card bg-base-100 shadow-xl">
                            <figure class="relative pt-[56.25%]">
                                <img src="/placeholder.svg" alt="武动乾坤"
                                     class="absolute inset-0 w-full h-full object-cover"/>
                            </figure>
                            <div class="card-body p-2">
                                <h3 class="card-title text-sm">武动乾坤</h3>
                                <p class="text-xs text-gray-400">更新至18集</p>
                            </div>
                        </div>
                        <!-- Recommended Item 4 -->
                        <div class="card bg-base-100 shadow-xl">
                            <figure class="relative pt-[56.25%]">
                                <img src="/placeholder.svg" alt="完美世界"
                                     class="absolute inset-0 w-full h-full object-cover"/>
                            </figure>
                            <div class="card-body p-2">
                                <h3 class="card-title text-sm">完美世界</h3>
                                <p class="text-xs text-gray-400">更新至30集</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Episode List -->
        <div class="lg:col-span-1">
            <div class="bg-base-200 rounded-lg p-4 sticky top-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold">金牌影院播放器</h3>
                    <span class="text-sm">1-10</span>
                </div>
                <div class="grid grid-cols-5 gap-2">
                    <button class="btn btn-sm">1</button>
                    <button class="btn btn-sm">2</button>
                    <button class="btn btn-sm">3</button>
                    <button class="btn btn-sm">4</button>
                    <button class="btn btn-sm">5</button>
                    <button class="btn btn-sm">6</button>
                    <button class="btn btn-sm btn-primary">7</button>
                    <button class="btn btn-sm">8</button>
                    <button class="btn btn-sm">9</button>
                    <button class="btn btn-sm">10</button>
                </div>
            </div>
        </div>
    </div>
</div>

<%-- 脚注 --%>
<jsp:include page="/include/footer_bar.jsp"/>
<jsp:include page="/include/hover_theme_controller.jsp"/>
</body>
</html>